<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ count }}</text>
		</view>
		<view style="margin-top: 100rpx;margin-bottom: 30rpx;">------------防抖-----------</view>
		<!-- 防抖 -->
		<view style="display: flex;">
			<button type="warn" @tap="add">增加(立即执行)</button>
			<button type="primary" style="margin-left: 50rpx;" @tap="reducer">减少(非立即执行)</button>
		</view>
		<!-- 节流 -->
		<view style="margin-top: 30rpx;">------------节流-----------</view>
		<view style="margin-top: 30rpx;display: flex;">
			<button type="primary" @tap="add2">增加(立即执行)</button>
			<button type="default" style="margin-left: 50rpx;" @tap="reducer2">增加(非立即执行)</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			count: 1
		};
	},
	onLoad() {},
	methods: {
		/**
		 * 节流（节流和防抖用法一样，只需将方法改为throttling即可）
		 */
		add2() {
			// 调用其他方法示例
			this.$debounceUtils.throttling(this.method1, 1000);
			// 调用其他方法带参示例
			// this.$debounceUtils.throttling(this.method2, 1000, [5]);
			// // 调用内部示例
			// this.$debounceUtils.throttling(() => {
			// 	++this.count;
			// }, 1000);
		},
		reducer2() {
			this.$debounceUtils.throttling(this.method1, 1000, [], false);
		},
		/**
		 * 防抖
		 */
		add() {
			console.time('detime');
			this.$debounceUtils.debounce(() => {
				++this.count;
				console.timeEnd('detime');
			}, 1000);
		},
		reducer() {
			console.time('detime');
			this.$debounceUtils.debounce(() => {
					--this.count;
					console.timeEnd('detime');
				},1000,[],false
			);
		},
		method1() {
			++this.count;
		},
		method2(num) {
			this.count += num;
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
